<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="sltCity">
</select>
<select id="sltArea">

</select>
</body>
<script src="../../lib/jquery-3.6.0.js"></script>
<script src="../../mock/cities.js"></script>
<script>
    $.each(cities,function (index,item) {
        var opt = $('<option></option>').val(item.id).text(item.name);
        $('#sltCity').append(opt);
    })

    $('#sltCity').change(function () {
      var selected=  $(this).val();    // 被选中的dom节点
      var current=   cities.find(function (item) { // 通过dom上的数据，过滤对应的数据源
          return item.id == selected;
      })

       $('#sltArea').empty();
      $.each(current.children,function (index,item) { // 使用数据，渲染dom
          var opt = $('<option></option>').val(item.id).text(item.name);
          $('#sltArea').append(opt);
      })

    })

</script>
</html>